<template>
  <div>
   <Topp @addTodo="addTodo"/>
   <Lstt :todoss="todoss" />
  <Foottt :todoss="todoss"  :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
  </div>
</template>

<style>

</style>
<script>
import pubsub from 'pubsub-js'
import Topp from './Todo/Topp.vue'
import Lstt from './Todo/Lstt.vue'
import Foottt from './Todo/Foottt.vue'
export default {
name:'App',
data(){
  return{
    // 创建一个数组，存放数据
    // 保存数据到本地
   todoss:JSON.parse(localStorage.getItem('todoss'))||[]
  }
},
methods:{
// 添加一个todo
  addTodo(todo){
    // 接受 todo 的数据，并添加为第一个到 todoss （数组中）
    this.todoss.unshift(todo)
  },
// 勾选or取消勾选
checkTodo(id){
  this.todoss.forEach((todo)=>{
    if(todo.id===id) todo.done=!todo.done
  })
},
// 更新一个title
updateTodo(id,title){
  this.todoss.forEach((todo)=>{
    if(todo.id===id) todo.title=title
  })
},
  // 删除一个todo
    deleteTodo(_,id){
this.todoss=this.todoss.filter(todo =>todo.id !==id)
  },
// 全选or取消全选
checkAllTodo(done){
  this.todoss.forEach((todo)=>{
    todo.done=done
  })
},
// 清除所有已完成的todo
clearAllTodo(){
 this.todoss=this.todoss.filter((todo)=>{
    return !todo.done
  })
},



},
components:{
 Topp,
    Foottt,
    Lstt,
    
},
// 监视
watch:{
  // 深度监视  监控input 
todoss:{
  deep:true,
  handler(value)
  {
localStorage.setItem('todoss',JSON.stringify(value))
  }
}
},
mounted(){
  // 采用全局事件总线
  this.$bus.$on('checkTodo',this.checkTodo)
  this.$bus.$on('updateTodo',this.updateTodo)
    // this.$bus.$on('deleteTodo',this.deleteTodo)
   this.pubId =pubsub.subscribe('deleteTodo',this.deleteTodo)
},
// 注销
beforeDestroy(){
  // 采用全局事件总线
    this.$bus.$off('checkTodo')
        this.$bus.$off('updateTodo')

  // this.$bus.$off('deleteTodo')
   pubsub.unsubscribe(this.pubId)
}
}
</script>
